<template>
	<div style="background: #36759c">
		<yd-it-road
			ref="ydItRoadRef"
			:config="{ type: 'AllItRoad', canvasHeight: 3000, noDataFlag: false }"
			@dragNode="updateSegmentPos"
			@afterRender="resizeITRoad"
			@graphInited="graphInited"
		></yd-it-road>
	</div>
</template>

<script setup lang="tsx">
import { reactive, ref, onMounted, nextTick } from 'vue';
import YdItRoad from '../../components/YdItRoad/index.vue';
import grapData from './graphData';

const ydItRoadRef = ref<InstanceType<typeof YdItRoad>>();

let config = reactive({
	// 刷新时间下拉选
	refreshTimeOptions: [
		{
			value: 60,
			label: '1分钟',
		},
		{
			value: 300,
			label: '5分钟',
		},
		{
			value: 1800,
			label: '30分钟',
		},
		{
			value: 3600,
			label: '60分钟',
		},
	],
	// 当前画布模式
	currentMode: 'default',
	// 刷新时间倒计时文本
	refreshTimeText: undefined,
	// 刷新时间定时器
	refreshTimeInterval: null,
	// 日期控件配置项
	datePickerOptions: {
		// 禁选日期
		disabledDate(time: Date) {
			return time.getTime() > Date.now();
		},
	},
	// 编辑模式启动按钮样式开关
	isIconEditActive: false,
	// 编辑按钮提示文本
	iconEditTooltipText: '编辑模式：关闭',
	// 鹰眼按钮样式开关
	isIconShowMinimapActive: true,
	// 鹰眼开关提示文本
	iconShowMinimapText: '鹰眼：开启',
	// 刷新时间下拉选开关
	isSelectRefreshTime: false,
});
onMounted(() => {
	// graphInited();
});

// g6组件初始化完成
function graphInited() {
	nextTick(() => {
		console.log('ydItRoadRef', ydItRoadRef.value);
		console.log('ydItRoadRef.value.graph', ydItRoadRef.value?.graph.getHeight());

		// ydItRoadRef.value?.graph.changeSize(ydItRoadRef.value.graph.getWidth(), ydItRoadRef.value.graph.getHeight());
		// 加载IT路径图
		ydItRoadRef.value?.loadItRoadData(grapData);
		// ydItRoadRef.value?.setLayout({
		// 	type: 'allItRoadLayout',
		// });
	});
}

// 更新网端位置
function updateSegmentPos(ev: any, model: any) {
	// 编辑模式启动情况下或指定model不为空才更新网端位置
	if (config.isIconEditActive || model) {
		let segmentPos = model || {
			segmentId: ev.item.getModel().segmentId,
			locationX: ev.item.getModel().x,
			locationY: ev.item.getModel().y,
		};
		if (segmentPos.locationX) {
			// updateSegmentPosition(segmentPos).then((res) => {
			// 	// console.log(res);
			// });
		}
	}
}

// 路径图渲染完成后获取canvas大小,高度较小时调整canvas
function resizeITRoad() {
	let graph = ydItRoadRef.value.graph;
	let canvasHeight = graph.getHeight();
	let canvasWidth = graph.getWidth();
	let viewHeight = document.body.clientHeight - 278;
	if (canvasHeight < viewHeight) {
		graph.changeSize(canvasWidth, viewHeight);
	}
}
</script>

<style scoped></style>
